﻿<!DOCTYPE html>
<html>
<head>
    <!-- 引入图标谷歌字体 -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- 引入materialize css -->
    <link type="text/css" rel="stylesheet" href="~/Content/css/materialize.css" media="screen,projection" />
    <!-- 设置网页适配手机 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8">
    <title>身份绑定</title>
</head>
<body>
    <nav class="teal">
        <div class="nav-wrapper">
            <a href="#" class="brand-logo center">
                <i class="material-icons">assignment_ind</i>
                身份绑定
            </a>
        </div>
    </nav>
    <div class="row container" style="margin-top: 10px;" id="app">
        <div class="input-field col s12">
            <i class="material-icons prefix">credit_card</i>
            <input id="id_card" type="tel" class="validate">
            <label for="id_card">身份证号</label>
        </div>
        <div class="input-field col s12">
            <i class="material-icons prefix">account_circle</i>
            <input id="name" type="text" class="validate">
            <label for="name">姓名</label>
        </div>
        <div class="input-field col s12">
            <i class="material-icons prefix">wc</i>
            <select>
                <option value="0">女性</option>
                <option value="1">男性</option>
            </select>
            <label>性别</label>
        </div>
        <div class="input-field col s12">
            <i class="material-icons prefix">people</i>
            <select>
                <option v-for="item in nation" :key="item.id">{{item.name}}</option>
            </select>
            <label>民族</label>
        </div>
        <div class="input-field col s12">
            <i class="material-icons prefix">today</i>
            <input id="birthday" type="tel" class="validate">
            <label for="birthday">生日 例如19930101</label>
        </div>
        <div class="input-field col s12">
            <i class="material-icons prefix">phone</i>
            <input id="tel_num" type="tel" class="validate">
            <label for="tel_num">手机号码</label>
        </div>
        <div class="input-field col s12">
            <i class="material-icons prefix">home</i>
            <input id="address" type="text" class="validate">
            <label for="address">居住地址</label>
        </div>
        <div class="col s12 center-align">
            <a class="waves-effect waves-light btn-large teal modal-trigger" href="#modal1">
                <i class="material-icons left">all_inclusive</i>
                绑定确认
            </a>
        </div>
        <p>{{wxOpenId}}</p>
        <div id="modal1" class="modal">
            <div class="modal-content">
                <h4>绑定成功</h4>
                <p>您的信息绑定完成，可以继续下一步操作。</p>
            </div>
            <div class="modal-footer">
                <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">知道了！</a>
            </div>
        </div>
    </div>

    <!-- 引入jQuery -->
    <script src="~/Content/js/jQuery_3.4.1.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入materialize（依赖jQuery） -->
    <script src="~/Content/js/materialize.js" type="text/javascript"></script>
    <!-- 引入vue.js -->
    <script src="~/Content/js/vue.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入axios.js -->
    <script src="~/Content/js/axios.min.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('select').material_select();
        });
        $(document).ready(function () {
            $('.modal').modal();
        });
    </script>

    <script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					start_year: (new Date()).getFullYear() - 120,
					nation: [{
							"id": 1,
							"name": "汉族"
						},
						{
							"id": 2,
							"name": "蒙古族"
						},
						{
							"id": 3,
							"name": "回族"
						},
						{
							"id": 4,
							"name": "藏族"
						},
						{
							"id": 5,
							"name": "维吾尔族"
						},
						{
							"id": 6,
							"name": "苗族"
						},
						{
							"id": 7,
							"name": "彝族"
						},
						{
							"id": 8,
							"name": "壮族"
						},
						{
							"id": 9,
							"name": "布依族"
						},
						{
							"id": 10,
							"name": "朝鲜族"
						},
						{
							"id": 11,
							"name": "满族"
						},
						{
							"id": 12,
							"name": "侗族"
						},
						{
							"id": 13,
							"name": "瑶族"
						},
						{
							"id": 14,
							"name": "白族"
						},
						{
							"id": 15,
							"name": "土家族"
						},
						{
							"id": 16,
							"name": "哈尼族"
						},
						{
							"id": 17,
							"name": "哈萨克族"
						},
						{
							"id": 18,
							"name": "傣族"
						},
						{
							"id": 19,
							"name": "黎族"
						},
						{
							"id": 20,
							"name": "傈僳族"
						},
						{
							"id": 21,
							"name": "佤族"
						},
						{
							"id": 22,
							"name": "畲族"
						},
						{
							"id": 23,
							"name": "高山族"
						},
						{
							"id": 24,
							"name": "拉祜族"
						},
						{
							"id": 25,
							"name": "水族"
						},
						{
							"id": 26,
							"name": "东乡族"
						},
						{
							"id": 27,
							"name": "纳西族"
						},
						{
							"id": 28,
							"name": "景颇族"
						},
						{
							"id": 29,
							"name": "柯尔克孜族"
						},
						{
							"id": 30,
							"name": "土族"
						},
						{
							"id": 31,
							"name": "达翰尔族"
						},
						{
							"id": 32,
							"name": "么佬族"
						},
						{
							"id": 33,
							"name": "羌族"
						},
						{
							"id": 34,
							"name": "布朗族"
						},
						{
							"id": 35,
							"name": "撒拉族"
						},
						{
							"id": 36,
							"name": "毛南族"
						},
						{
							"id": 37,
							"name": "仡佬族"
						},
						{
							"id": 38,
							"name": "锡伯族"
						},
						{
							"id": 39,
							"name": "阿昌族"
						},
						{
							"id": 40,
							"name": "普米族"
						},
						{
							"id": 41,
							"name": "塔吉克族"
						},
						{
							"id": 42,
							"name": "怒族"
						},
						{
							"id": 43,
							"name": "乌孜别克族"
						},
						{
							"id": 44,
							"name": "俄罗斯族"
						},
						{
							"id": 45,
							"name": "鄂温克族"
						},
						{
							"id": 46,
							"name": "德昂族"
						},
						{
							"id": 47,
							"name": "保安族"
						},
						{
							"id": 48,
							"name": "裕固族"
						},
						{
							"id": 49,
							"name": "京族"
						},
						{
							"id": 50,
							"name": "塔塔尔族"
						},
						{
							"id": 51,
							"name": "独龙族"
						},
						{
							"id": 52,
							"name": "鄂伦春族"
						},
						{
							"id": 53,
							"name": "赫哲族"
						},
						{
							"id": 54,
							"name": "门巴族"
						},
						{
							"id": 55,
							"name": "珞巴族"
						},
						{
							"id": 56,
							"name": "基诺族"
						}
					],
					wxOpenId: '@ViewData["wxOpenId"]'
				},
				methods: {}
			})
    </script>
</body>
</html>